/**
This sheet contains styling that governs the overall look of each page on our site. Anything that needs adding to all pages in Self
should be added into this file.

If specific stylings are required for individual processes, add them into a process relevant section of the related RBBCProcesses.css which
will be called into processes as part of our custom Firmstep header configuration.
**/

/**
Add styling to change the default behaviour of the Granicus 'Next', 'Back', and 'Cancel' buttons on a browser window.
**/
@import
	url("https://fs-filestore-eu.s3.eu-west-1.amazonaws.com/reigatebanstead/Self/test/granicusProgressButtons.css")
	;

@import
	url("https://fs-filestore-eu.s3.eu-west-1.amazonaws.com/reigatebanstead/Self/test/granicusProgressCSS3Buttons.css")
	;

div#header, div#footer {
	background-color: #28285F;
	color: white;
	width: 100%;
}

div#self-precontent {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.navbar-inverse {
	background-color: #28285F;
	border-color: #28285F;
	height: 125px;
}

.navbar-inverse .navbar-brand {
	color: #fff;
}

.navbar-brand:focus-within {
	border: 2px solid #00a5ab;
}

.navbar-inverse .navbar-nav>li>a {
	/*color: #28285F;*/ /* for use when hiding login links */
	color: #fff; /* to display links in the system */
}

#session-badge {
	color: #fff;
}

.btn-primary {
	background-color: #28285F;
	border-color: #28285F;
}

.btn-primary:active {
	background: #0054a2;
	border-color: #0054a2;
}

.btn-primary:hover {
	color: #000;
	background: #00A5AB;
	border: 2px solid #28285f;
	transition: .20s ease-in;
	-moz-transition: .20s ease-in;
	-webkit-transition: .20s ease-in;
	text-decoration: none;
}

.btn-primary:focus {
	color: #fff;
	background: #0054a2;
	border: 2px solid white;
	-webkit-box-shadow: 0px 0px 0px 2px #00a5ab;
	-moz-box-shadow: 0px 0px 0px 2px #00a5ab;
	box-shadow: 0px 0px 0px 2px #00a5ab;
	outline: none;
}

.btn-toptasks {
	margin: 3px;
}

.error_box {
	border-style: solid;
	border-color: red;
	border-width: thin;
	color: red;
	padding: 1em;
	float: right;
}

.hide-from-screen, .visually-hidden {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

.rbbc-Logo {
	width: 254px;
}

.social {
	float: right;
	margin-right: 3em;
	margin-top: 1.5em;
}

.social a {
	background-color: #fff;
	border-radius: 0.5rem;
	display: inline-block;
	margin: 0 0 0 10px;
	padding: 0.5rem;
}

.social i {
	color: #fff;
	font-size: 3.45em;
	margin: 0;
}

.social a:hover, .social a:focus {
	opacity: 0.7;
}

.social li {
	display: inline-block;
	list-style-type: none;
}

div#navigation {
	/*	display:none;*/
	/* Hides navigation buttons until they are required */
	
}

#toolbar .login-link {
	/*color: #28285F;*/
	/* hides the link from display, comment out rule when live */
	
}

li>a#registerLink {
	display: none;
	/* Hide the Firmstep 'Register' link from displaying alongside the new 'My R&BBC' link. */
}

.icon-social-facebook {
	background-image:
		url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='64' viewBox='0 0 64 64' aria-hidden='true' preserveAspectRatio='xMinYMid' height='64' focusable='false'%3e%3cpath fill='%2328285F' d='M36.63,3h8.9V13.17H39a2.83,2.83,0,0,0-2.61,2.34v6.67h9.14C45.15,27.3,44.4,32,44.4,32H36.33V61h-12V32H18.47V22.22h5.85v-8C24.32,12.77,24,3,36.63,3Z'%3e%3c/path%3e%3c/svg%3e");
	background-repeat: no-repeat;
}

.icon-social-instagram {
	background-image:
		url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='64' viewBox='0 0 64 64' aria-hidden='true' preserveAspectRatio='xMinYMid' height='64' focusable='false'%3e%3cpath fill='%2328285F' d='M32,7.86c7.74,0,8.66,0,11.72.17A15.92,15.92,0,0,1,49.1,9a8.86,8.86,0,0,1,3.34,2.17,9.07,9.07,0,0,1,2.17,3.33,16.25,16.25,0,0,1,1,5.38c.14,3.06.16,4,.16,11.72s0,8.66-.16,11.72a16.32,16.32,0,0,1-1,5.39,9.61,9.61,0,0,1-5.51,5.5,15.92,15.92,0,0,1-5.38,1c-3.06.14-4,.17-11.72.17s-8.66,0-11.72-.17a15.92,15.92,0,0,1-5.38-1,9.61,9.61,0,0,1-5.51-5.5,16.32,16.32,0,0,1-1-5.39c-.14-3.06-.16-4-.16-11.72s0-8.66.16-11.72a16.25,16.25,0,0,1,1-5.38,9.07,9.07,0,0,1,2.17-3.33A8.86,8.86,0,0,1,14.9,9a15.92,15.92,0,0,1,5.38-1c3.06-.14,4-.17,11.72-.17m0-5.23c-7.88,0-8.86,0-12,.18a21.25,21.25,0,0,0-7,1.35A14.23,14.23,0,0,0,7.87,7.5a14.21,14.21,0,0,0-3.35,5.14,21.66,21.66,0,0,0-1.35,7C3,22.77,3,23.76,3,31.63s0,8.87.17,12a21.72,21.72,0,0,0,1.35,7A14.84,14.84,0,0,0,13,59.11a21.25,21.25,0,0,0,7,1.35c3.1.14,4.08.17,12,.17s8.86,0,12-.17a21.25,21.25,0,0,0,7-1.35,14.84,14.84,0,0,0,8.48-8.48,21.72,21.72,0,0,0,1.35-7c.14-3.09.17-4.08.17-12s0-8.86-.17-11.95a21.66,21.66,0,0,0-1.35-7A14.84,14.84,0,0,0,51,4.16a21.25,21.25,0,0,0-7-1.35c-3.1-.14-4.08-.18-12-.18Zm0,14.11A14.9,14.9,0,1,0,46.89,31.63,14.89,14.89,0,0,0,32,16.74ZM32,41.3a9.67,9.67,0,1,1,9.67-9.67A9.67,9.67,0,0,1,32,41.3ZM47.48,12.67A3.48,3.48,0,1,0,51,16.15,3.48,3.48,0,0,0,47.48,12.67Z'%3e%3c/path%3e%3c/svg%3e");
	background-repeat: no-repeat;
}

.icon-social-linkedin {
	background-image:
		url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='64' viewBox='0 0 64 64' aria-hidden='true' preserveAspectRatio='xMinYMid' height='64' focusable='false'%3e%3cpath fill='%2328285F' d='M3.65,22.37H16.1V59.71H3.65ZM10.06,4.29C5.79,4.29,3,7,3,10.69S5.71,17,9.89,17H10C14.32,17,17,14.26,17,10.66S14.32,4.29,10.06,4.29ZM46.55,21.56c-6.62,0-9.56,3.64-11.34,6.19V22.37H23.1c.17,3.55,0,37.34,0,37.34H35.21V39a8.41,8.41,0,0,1,.56-3,7,7,0,0,1,6.54-4.56c4.51,0,6.24,3.44,6.24,8.48V59.71H61V38.43C61,26.91,54.75,21.56,46.55,21.56Z'%3e%3c/path%3e%3c/svg%3e");
	background-repeat: no-repeat;
}

.icon-social-nextdoor {
	background-image:
		url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' aria-hidden='true' focusable='false'%3e%3cdefs%3e%3cstyle%3e .cls-1 %7b fill: %2328285F; fill-rule: evenodd; stroke-width: 0px;%7d %3c/style%3e%3c/defs%3e%3cpath class='cls-1' d='M1,8.5c0-.9.7-1.5,1.5-1.5h12.4c.9,0,1.6.7,1.6,1.5v6.2c0,1.7,1.4,3.1,3.1,3.1h.5c4.1-6.5,11.4-10.8,19.7-10.8,12.8,0,23.2,10.4,23.2,23.2v24.7c0,.9-.7,1.5-1.5,1.5h-12.4c-.9,0-1.5-.7-1.5-1.5v-24.7c0-4.3-3.5-7.7-7.8-7.7s-7.8,3.5-7.8,7.7v24.7c0,.9-.7,1.5-1.5,1.5h-12.4c-.9,0-1.5-.7-1.5-1.5v-24.7h-3.1c-6.9,0-12.4-5.5-12.4-12.3v-9.3Z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
}

.icon-social-twitter {
	background-image:
		url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' preserveAspectRatio='xMinYMid' aria-hidden='true' focusable='false'%3e%3cpath d='m2.15,2l23.17,33.09L2,62h5.25l20.41-23.56,16.49,23.56h17.85l-24.47-34.95L59.23,2h-5.25l-18.8,21.7L20,2H2.15Zm7.72,4.13h8.2l36.22,51.74h-8.2L9.86,6.13Z' fill='%2328285F' /%3e%3c/svg%3e");
	background-repeat: no-repeat;
}

.social__icon {
	background-size: contain;
	color: #fff;
	display: block;
	height: 3.25rem;
	margin: 0;
	width: 3.25rem;
}

/**
This section controls display of the Cludo search bar which allows us to search the main Jadu site content 
from a box included in the header of the Firmstep pages.
**/
div#cludo-search-form {
	display: none;
}

.search-filters h2 {
	display: none;
}

#cludo-search-form .cludo-search-button {
	background-color: #00802B;
	box-shadow: 0px 0px 0px 2px #00802B;
}

#cludo-search-form .cludo-search-button:hover, #cludo-search-form .cludo-search-button:focus-visible
	{
	background-color: #00A5AB;
	box-shadow: 0px 0px 0px 2px #00A5AB;
}

#cludo-search-form input[type="search"] {
	border: none;
}

#cludo-search-form input[type="search"]:focus {
	border: 3px solid #00a5ab !important;
}

#cludo-search-form button {
	background-image: none !important;
	text-indent: unset !important;
}

/**
This section improves control over the appearance of the service groups displayed at the top of the 
A-Z of Services list, once they have been activated and have had tasks assigned to them.
**/
.service-groups ul.menu li {
	overflow: hidden;
}

/**
This section controls the display of links on the 'Before you begin' page as buttons, rather
than as a mixture of buttons and text links.
**/
#anonymousLoginScreen #btn-anon, #anonymousLoginScreen #btn-login {
	color: white !important;
	background-color: #28285F;
	margin-top: 0.5em;
	padding-top: 0;
	width: 10em;
}

#anonymousLoginScreen #btn-register:focus-visible, #anonymousLoginScreen #btn-login:focus-visible,
	#anonymousLoginScreen #btn-anon:focus-visible {
	color: #fff;
	background: #0054a2;
	border: 2px solid white;
	-webkit-box-shadow: inset 0px 0px 0px 2px #00a5ab;
	-moz-box-shadow: inset 0px 0px 0px 2px #00a5ab;
	box-shadow: inset 0px 0px 0px 2px #00a5ab !important;
	outline: none;
	text-decoration: none;
}

#anonymousLoginScreen #btn-login .fa-sign-in {
	display: none;
}

#anonymousLoginScreen #btn-login:hover, #anonymousLoginScreen #btn-anon:hover
	{
	text-decoration: none;
	background-color: #00A5AB;
	color: #000000 !important;
}

#anonymousLoginScreen #btn-register {
	width: 10em;
}

/**
This section redefines classes that have come from the Jadu main display to allow widgets to appear
as part of this layout as well.

**/
.field {
	border-style: solid;
	border-width: 1px;
	font-family: "Lato", Calibri, Arial, sans-serif;
	padding: 5px 10px;
}

form {
	display: block;
	margin-top: 0em;
}

header form>button, .your-area-panel form button {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border: 1px solid #66C28C;
	text-align: center;
	font-size: 1.4em;
	width: 2.5em;
	padding: 0;
	vertical-align: middle;
	line-height: 2;
	background: #009632;
	border-radius: 0 3px 3px 0;
	margin-left: -3px;
	color: #fff;
}

header form>input[type="search"], .your-area-panel input {
	text-align: left;
	font-size: 1.4em;
	height: 2em;
	width: 220px;
	background: #fff;
	border-radius: 3px 0 0 3px;
	vertical-align: middle;
	box-shadow: inset 0px 0px 3px 1px rgba(70, 84, 93, 0.4);
	border: none;
	line-height: 2;
	margin: 0;
	padding: 0 0 0 15px;
	transition: .40s ease-in;
	-moz-transition: .40s ease-in;
	-webkit-transition: .40s ease-in;
	-webkit-appearance: none;
}

.hide-from-screen, .visually-hidden {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
}

input {
	font-style:;
	font-variant-ligatures:;
	font-variant-caps:;
	font-variant-numeric:;
	font-variant-east-asian:;
	font-variant-alternates:;
	font-weight:;
	font-stretch:;
	font-size:;
	font-family:;
	font-optical-sizing:;
	font-kerning:;
	font-feature-settings:;
	font-variation-settings:;
	text-rendering: auto;
	color: fieldtext;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	appearance: auto;
	-webkit-rtl-ordering: logical;
	cursor: text;
	background-color: field;
	margin: 0em;
	padding: 1px 2px;
	border-width: 2px;
	border-style: inset;
	border-color: -internal-light-dark(rgb(118, 118, 118),
		rgb(133, 133, 133));
	border-image: initial;
}

.popular-box h2, .your-area-panel h2 {
	text-align: center;
}

.widget {
	box-sizing: border-box;
	margin: 0 0 1em;
	padding: 0 10px;
}

.widget_row {
	
}

.widget-width {
	display: inline-block;
	float: none;
	margin-right: -4px;
	vertical-align: top;
}

.widget-width__100 {
	width: 100%;
}

.your-area-panel {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.your-area-panel {
	box-shadow: inset -1px 5px 42px 62px rgba(60, 72, 79, 0.7);
	background: #465450;
	width: 100%;
	margin: 0 auto;
	border-radius: 3px;
	color: #fff;
	padding: 1em;
}

.your-area-panel h2 {
	color: #ffffff;
	font-size: 2.1429em;
}

.your-area-panel form, .your-area-panel p {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.your-area-panel input {
	width: 160px;
}
/**
This section customises the display of elements within the Firmstep FOI MyService.
particularly, those elements that we do not want displayed on screen
**/
span[data-name="statictext2"] {
	display: none;
}

/**
Create styling for an 'information panel' that can appear on a process page to give additional information to the customer.
Used, for instance, in purchase bins to warn that the crew have already logged a bin as damaged and in need of repair or replacement.

At present (Jul 2020) styles for our own custom classes defined here are not picked up for application within Firmstep pages.
Hopefully a future development of the product will allow this.
**/
.information-panel {
	clear: both;
	border-left: 4px solid #bfc1c3;
	padding: 10px 10px 1px 20px;
	margin: 15px 0px 10px 10px;
}

/**
Add styles to increase the contrast between foreground and background for standard Firmstep elements.
**/
.form-control, .btn-default, .btn-af {
	border-color: #737373;
}

/**
Disable the display of some category specific elements so that processes can be displayed within 
a frame on PageBuilder pages
**/
.AF-Category-Dev-RR-2 #toolbar {
	display: none;
}

.AF-Category-Dev-RR-2 #header {
	display: none;
}

.AF-Category-Dev-RR-2 #navigation {
	display: none;
}

.AF-Category-Dev-RR-2 #footer {
	display: none;
}

.AF-Category-Dev-RR-2 #NewFAQs {
	display: none;
}

.AF-Category-Dev-RR-2 .renderform {
	padding-left: 0px;
	padding-right: 0px;
}

.AF-Category-Dev-RR-2 .loading {
	display: none;
}

/**
Add styling that applies just to the page footer.
**/
div#footerImage {
    background-image:url("https://fs-filestore-eu.s3.eu-west-1.amazonaws.com/reigatebanstead/Granicus%20RBBC%20skyline.jpg");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    padding-top:14.65%;
}
div#footer {
    padding:0;
    border-top:none;
    background-color:none;
}

div#footer a {
	color: #ffffff;
	text-decoration: underline;
}

div#footer a:focus {
	color: #fff;
	background: #0054a2;
	border: 2px solid white;
	-webkit-box-shadow: 0px 0px 0px 2px #00a5ab;
	-moz-box-shadow: 0px 0px 0px 2px #00a5ab;
	box-shadow: 0px 0px 0px 2px #00a5ab;
	outline: none;
}

/**
Add styles that will affect the layout of the content in the Granicus Staff portal (Dash)
**/
.splash-background {
	background-color: #999999;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	height: 100%;
	width: 100%
}

.splash {
	border-radius: 3em;
	position: fixed;
	top: 50%;
	left: 50%;
	height: 30em;
	width: 35em;
	transform: translate(-50%, -50%);
	background-color: #28285f;
	transition: all ease-in-out 600ms;
}

.splash-header {
	height: 2em;
	font-size: 2em;
}

.splash-content, .splash-header {
	color: white;
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width:60%;
}

.splash-content a button:hover {
	background-color: #00A5AB;
	color:#000 !important;
}

/**
Adjust the layout for those elements which must be moved or sized differently when 
displayed on a phone or tablet as opposed to a PC screen
**/
@media screen and (max-width:775px) {
	.rbbc-Logo {
		width: 254px;
	}
}

@media screen and (max-width:480px) {
	.rbbc-Logo {
		width: 100px;
	}
	.social {
		margin-top: 0;
	}
	.social i {
		font-size: 2em;
	}
	.social__icon {
		height: 2.5rem;
		width: 2.5rem;
	}
	.ui-pnotify {
		position: sticky;
		bottom: 0px;
		float: right;
	}
}